﻿<script lang="ts" name="purchasingorder" setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { auth } from '/@/utils/authFunction';
import type { FormRules } from "element-plus";
import { formatDate } from '/@/utils/formatTime';
import { Plus } from "@element-plus/icons-vue";
import { UploadRequestOptions } from "element-plus";
import { usePurchasingorderApi } from '/@/api/OrderManagement/purchasingorder';
import { useCommodityinformationApi } from '/@/api/Merchandisemanagement/commodityinformation';
import { ElTable } from 'element-plus'
const commodityinformationApi = useCommodityinformationApi();
//父级传递来的函数，用于回调
const emit = defineEmits(["reloadTable"]);
const purchasingorderApi = usePurchasingorderApi();
const ruleFormRef = ref();

const state = reactive({
	exportLoading: false,
  tableLoading: false,
	title: '',
	loading: false,
	showDialog: false,
	ruleForm: {} as any,
	stores: {},
	ssss: '',
	dropdownData: {} as any,
	getdropdownDatalist: {} as any,
	tableParams: {
    page: 1,
    pageSize: 20,
    total: 0,
    field: 'createTime', // 默认的排序字段
    order: 'descending', // 排序方向
    descStr: 'descending', // 降序排序的关键字符
	goodsID:'',
	vendorID:"",
	userID:"", 
	unit:"",
	selectData: {} as any
  },
  
});

// 自行添加其他规则
const rules = ref<FormRules>({
});

// 页面加载时
onMounted(async () => {
  const data = await purchasingorderApi.getDropdownData(false).then(res => res.data.result) ?? {};
  state.dropdownData.supplier = data.supplier ?? [];
  state.dropdownData.purchasingDepartment = data.purchasingDepartment ?? [];
  state.dropdownData.purchaser = data.purchaser ?? [];

  handleQuery()
});





// 查询操作
const handleQuery = async (params: any = {}) => {

	
  state.tableLoading = true;
  state.tableParams = Object.assign(state.tableParams, params);
  const result = await commodityinformationApi.page(Object.assign(state.getdropdownDatalist, state.tableParams)).then(res => res.data.result);
  state.tableParams.total = result?.total;
  state.getdropdownDatalist = result?.items ?? [];
  state.tableLoading = false;
};

// 打开弹窗
const openDialog = async (row: any, title: string) => {
	state.title = title;
	row = row ?? {  };
	state.ruleForm = row.id ? await purchasingorderApi.detail(row.id).then(res => res.data.result) : JSON.parse(JSON.stringify(row));
	state.showDialog = true;
	


};

// 关闭弹窗
const closeDialog = () => {
	emit("reloadTable");
	state.showDialog = false;
};

// 提交
const submit = async () => {
	ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
		if (isValid) {
			let values = state.ruleForm;
			await purchasingorderApi[state.ruleForm.id ? 'update' : 'add'](values);
			closeDialog();
			console.log(state.ruleForm.ssss);
		} else {
			ElMessage({
				message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
				type: "error",
			});
		}
	});
};

const uploadUploadAttachmentHandle = async (options: UploadRequestOptions) => {
	const res = await purchasingorderApi.uploadUploadAttachment(options);
	state.ruleForm.uploadAttachment = res.data.result?.url;
	};

//将属性或者函数暴露给父组件
defineExpose({ openDialog });







</script>



    <template #header>


		
		<div >
		<el-dialog v-model="state.showDialog" :width="800" draggable :close-on-click-modal="false"  >
			
			<template #header>
				<div style="color: #fff">
					<span>{{ state.title }}</span>
				</div>
			</template>
			<el-card>
			<div class="card-header" >
				<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto" :rules="rules">
				<el-row :gutter="35">
					<el-form-item v-show="false">
						<el-input v-model="state.ruleForm.id" />
					</el-form-item>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" >
						<el-form-item label="进货单号" prop="purchaseOrdernumber">
							<el-input v-model="state.ruleForm.purchaseOrdernumber" placeholder="请输入进货单号" maxlength="32" show-word-limit clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" >
						<el-form-item label="进货日期" prop="purchaseDate">
							<el-date-picker v-model="state.ruleForm.purchaseDate" type="date" placeholder="进货日期" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" >
						<el-form-item label="供货商" prop="supplier">
							<el-select clearable filterable v-model="state.ruleForm.supplier" placeholder="请选择供货商">
								<el-option v-for="(item,index) in state.dropdownData.supplier" :key="index" :value="item.value" :label="item.label" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" >
						<el-form-item label="联系人" prop="contacts">
							<el-input v-model="state.ruleForm.contacts" placeholder="请输入联系人" maxlength="32" show-word-limit clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" >
						<el-form-item label="进货部门" prop="purchasingDepartment">
							<el-select clearable filterable v-model="state.ruleForm.purchasingDepartment" placeholder="请选择进货部门">
								<el-option v-for="(item,index) in state.dropdownData.purchasingDepartment" :key="index" :value="item.value" :label="item.label" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" >
						<el-form-item label="进货人" prop="purchaser">
							<el-select clearable filterable v-model="state.ruleForm.purchaser" placeholder="请选择进货人">
								<el-option v-for="(item,index) in state.dropdownData.purchaser" :key="index" :value="item.value" :label="item.label" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" >
						<el-form-item label="备注" prop="remark">
							<el-input v-model="state.ruleForm.remark" placeholder="请输入备注" maxlength="200" show-word-limit clearable />
						</el-form-item>
					</el-col>
					
				</el-row>
			</el-form>
			</div>
		</el-card>
		<el-card>
			<!-- 显示 -->
			<div  >
				

				<el-form-item label="货品列表" prop="ssss">

		<el-table :data="state.getdropdownDatalist" @selection-change="(val: any[]) => { state.selectData = val; }" style="width: 100%" v-loading="state.tableLoading" tooltip-effect="light" row-key="id" @sort-change="sortChange" border>
			<el-table-column  type="selection" width="40" align="center"  v-if="auth('purchasingorder:batchDelete') || auth('purchasingorder:export')" prop="index"  />
        <el-table-column type="index" label="序号" width="55" align="center"/>
        <el-table-column prop='itemName' label='货品信息' show-overflow-tooltip />
        <el-table-column prop='itemCode' label='货品编号' show-overflow-tooltip />
        <el-table-column prop='goodsID' label='货品类型' :formatter="(row: any) => row.goodsDisplayName" show-overflow-tooltip />
        <el-table-column prop='specifications' label='规格型号' show-overflow-tooltip />
        <el-table-column prop='enterPrice' label='入库参考价/元' show-overflow-tooltip />
        <el-table-column prop='gooutPrice' label='出库参考价/元' show-overflow-tooltip />
        <el-table-column prop='vendorID' label='供应商' :formatter="(row: any) => row.vendorFkDisplayName" show-overflow-tooltip />
        <el-table-column prop='userID' label='客户名称' :formatter="(row: any) => row.userFkDisplayName" show-overflow-tooltip />
        <el-table-column prop='displayOrder' label='显示顺序' show-overflow-tooltip />
        <el-table-column prop='state' label='状态' show-overflow-tooltip>
          <template #default="scope">
            <el-tag v-if="scope.row.state"> 是 </el-tag>
            <el-tag type="danger" v-else> 否 </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop='shelflife' label='保质期' show-overflow-tooltip />
        <el-table-column prop='earlywarning' label='预警天数（天）' show-overflow-tooltip />
        <el-table-column prop='remark' label='备注' show-overflow-tooltip />
        <el-table-column prop='inventory' label='当前库存' show-overflow-tooltip />
        <el-table-column prop='inventoryPrice' label='库存总金额' show-overflow-tooltip />
        <el-table-column prop='unit' label='单位' :formatter="(row: any) => row.unitFkDisplayName" show-overflow-tooltip />
        <el-table-column prop='barcodes' label='条码' show-overflow-tooltip />
        <el-table-column label="修改记录" width="100" align="center" show-overflow-tooltip>
          <template #default="scope">
            <ModifyRecord :data="scope.row" />
          </template>
        </el-table-column>
       
      </el-table>



	</el-form-item>




					
			</div>
		</el-card>

		<el-card>
			<div>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" >
						<el-form-item label="上传附件" prop="uploadAttachment">
							<el-upload
								list-type="picture-card"
								:show-file-list="false"
								:http-request="uploadUploadAttachmentHandle">
								<img
									v-if="state.ruleForm.uploadAttachment"
									:src="state.ruleForm.uploadAttachment"
									@click="state.ruleForm.uploadAttachment=''"
									style="width: 100%; height: 100%; object-fit: contain"/>
									<el-icon v-else><Plus /></el-icon>
							</el-upload>
						</el-form-item>
					</el-col>
			</div>	
		</el-card>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="() => state.showDialog = false">取 消</el-button>z
					<el-button @click="submit" type="primary" v-reclick="1000">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
    </template>
   

	
	

<style lang="scss" scoped>
:deep(.el-select), :deep(.el-input-number) {
  width: 100%;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
}
</style>